<template>
  <div>
    <div class="editor-select-btn">
      <template v-for="(item, index) in data" :key="index">
        <div
          class="item"
          :class="item.value == modelValue ? 'active' : ''"
          @click="selectedItem(item.value)"
        >
          <template v-if="icon">
            <span class="icon" :class="item.title"></span>
          </template>
          <template v-else>{{ item.title }}</template>
        </div>
      </template>
    </div>
    <slot></slot>
  </div>
</template>
    <script lang="ts">
export default {
  name: "storeDiyFormSelectBtn",
};
</script>
    <script  lang="ts" setup >
const props = withDefaults(
  defineProps<{
    data?: any;
    modelValue: number | string | undefined;
    icon?: boolean;
  }>(),
  {
    data: [],
    modelValue: "",
    icon: false,
  }
);

const emit = defineEmits(["update:modelValue", "change"]);

const selectedItem = (val: number | string) => {
  if (props.modelValue != val) {
    emit("update:modelValue", val);
    emit("change", val);
  }
};
</script>
  
  <style scoped>
.editor-select-btn {
  display: flex;
  justify-content: flex-end;
  color: #000;
  margin: 5px 0;
  height: 30px;
}
.editor-select-btn .item {
  display: block;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  border: 1px solid #f0f0ed;
  border-right: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
}
.editor-select-btn .item:last-child {
  border-right: 1px solid #f0f0ed;
}
.editor-select-btn .item.active {
  background: var(--el-color-primary-light-9);
  border: 1px solid var(--base-default);
  color: var(--base-default);
}
.editor-select-btn .item .icon {
  font-size: 20px;
}
</style>